<template>
  <div class="g-video-medium">
    <!-- 视屏部分 -->
    <div class="g-video-medium-video">
      <div class="medium-video">
        <!-- <pub-video :config="config" :id="id" :className="className" ref="getRef"></pub-video> -->
        <div class="myvideo" :id="id" ref="getRef" style="width: 100%; height: 100%"></div>
      </div>
      <!-- 遮罩 -->
      <div class="g-video-box-cover">
        <video-shade></video-shade>
      </div>
    </div>
    <!-- 标题个人部分 -->
    <div class="g-video-medium-title">
      <div class="title-content">111111</div>
      <!-- 右边操作功能 -->
      <div class="title-share">
        <!-- 点赞 -->
        <div class="praise">
          <img src="../../assets/icon-img/dianzan.png" alt="" />
        </div>
        <!-- 分享 -->
        <div>
          <img src="../../assets/icon-img/xuanxiang.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { toRefs, ref, onMounted, reactive, onUnmounted } from 'vue'
// import { useStore } from 'vuex'
// import pubVideo from '../pub-video/index.vue'
import VideoShade from './video-shade'
export default {
  props: {
    title: {
      type: String
    },
    imgSrc: {
      type: String
    },
    id: {
      type: String
    },
    config: {
      type: Object
    },
    xIndex: {
      type: Number,
      String
    }
  },
  components: {
    VideoShade
  },
  setup(props) {
    // const store = useStore()
    const io = ref()
    const getRef = ref()
    const audioref = ref()
    // ckplayer参数
    const videoObject = reactive({
      container: `#${props.id}`, //容器的ID或className
      plug: 'hls.js', // live: true,
      volume: 0,
      // autoplay: true,
      html5m3u8: true,
      // waiting: false,
      // video: 'https://ckplayer-video.oss-cn-shanghai.aliyuncs.com/mp4/1_1920x1080.mp4',
      poster:
        '//d300.paixin.com/thumbs/3069483/43968111/staff_1024.jpg?imageView2/2/w/500/h/360/format/webp/interlace/1/q/90/ignore-error/1'
    })
    const initPlayer = (id) => {
      audioref.value = new window.ckplayer(Object.assign(videoObject, { ...props.config, container: `#${id}` }))
    }

    // 调用交叉视口
    onMounted(() => {
      io.value = new IntersectionObserver(
        (entries) => {
          entries.forEach((entries) => {
            // 出现在视口
            if (entries.isIntersecting) {
              // store.commit('video/GET_VIDEO', { refId: props.id, parentIndex: props.xIndex, dom: getRef.value })
              // console.log(store.state.video)
              // console.log('出现在视口', store.state.video.indexList[0])
              entries.target.ckFlag = true
              // 消失在视口
            } else {
              // store.commit('video/DELETE_VIDEO', { refId: props.id, parentIndex: props.xIndex })
              // console.log('消失在视口', store.state)
              if (entries.target.children[0]) {
                entries.target.children[0].remove()
              }
            }
          })
        },
        { threshold: [1] }
      )
      io.value.observe(getRef.value)
    })
    onUnmounted(() => {
      io.value.disconnect()
    })

    return {
      ...toRefs(videoObject),
      getRef
    }
  }
}
</script>

<style lang="scss" scoped>
.g-video-medium {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  height: 200px;
  background-color: pink;
  margin: 0 13px 10px 0;
  box-shadow: 2px 1px 3px #ccc;
  border-radius: 5%;
  .g-video-medium-video {
    position: relative;
    width: 100%;
    height: 80%;
    background-color: bisque;
    .g-video-box-cover {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      z-index: 2;
    }
    .medium-video {
      width: 100%;
      height: 100%;
    }
  }
  .g-video-medium-title {
    display: flex;
    justify-content: space-between;
    padding-top: 6px;
    // height: 40%;
    .title-content {
      flex: 7;
      display: flex;
      align-items: center;
      margin-left: 5px;
    }
    .title-share {
      flex: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      img {
        width: 20px;
      }
      .praise {
        height: 100%;
      }
    }
  }
  // .myvideo {
  //   width: 300px;
  //   height: 100px;
  //   background-color: beige;
  // }
}
</style>
